<script>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {login, register} from '@/api/api.js'
import {ElMessage} from "element-plus";

export default {
  name: 'LoginIndex',
  setup: function () {
    const router = useRouter();
    const isRightPanelActive = ref(false);
    const signUpEmail = ref('');
    const signUpUserName = ref('');
    const signUpPassword = ref('');
    const signInUserName = ref('');
    const signInPassword = ref('');
    const loginMessage =ref('')
    // 从 localStorage 中读取用户数据
    const users = ref(JSON.parse(localStorage.getItem('users')) || []);

    const toggleToSignIn = () => {
      isRightPanelActive.value = false;
    };

    const toggleToSignUp = () => {
      isRightPanelActive.value = true;
    };

    const forgotPassword = () => {
      alert('Forgot Password');
    };


    const handleSignUp = () => {
      if (!signUpUserName.value || !signUpPassword.value || !signUpEmail.value) {
        alert('请填写完整信息');
        return;
      }
      // 邮箱信息检测
      if (signUpEmail.value.toString().indexOf("@") == -1) {
        alert('邮箱格式不正确');
        return;
      }
      // 检查是否已注册
      register(signUpUserName.value, signUpPassword.value,signUpEmail.value)
        .then(result => {
          if (!result.success) {
            alert(result.message)
          }else {
            alert(result.message)
            router.push('/home');
          }
          // 登录成功后跳转到仪表盘或其他页面
        })
        .catch(result => {
          alert(result.message)
        });
      router.push('/home'); // 跳转到 /home 页面
    };

    //登录函数
    const handleSignIn = async () => {
      if (!signInUserName.value || !signInPassword.value) {
        alert('请填写用户名和密码');
        return;
      }
      // 使用api
      login(signInUserName.value, signInPassword.value)
        .then(result => {
          if (!result.success) {
            alert(result.message)
          }else {
            alert(result.message)
            router.push('/home');
          }
          // 登录成功后跳转到仪表盘或其他页面
        })
        .catch(result => {
          alert(result.message)
        });
    };

    return {
      isRightPanelActive,
      signUpEmail,
      signUpUserName,
      signUpPassword,
      signInUserName,
      signInPassword,
      toggleToSignIn,
      toggleToSignUp,
      forgotPassword,
      handleSignUp,
      handleSignIn,
    };
  },
};
</script>

<template>
  <div class="login-container">
    <div class="container" :class="{ 'right-panel-active': isRightPanelActive }">
      <!-- Sign Up -->
      <div class="container__form container--signup">
        <form action="#" class="form" id="form1" @submit.prevent="handleSignUp">
          <h2 class="form__title">{{ $t('login.signUp') }}</h2>
          <input type="text" v-model="signUpUserName" :placeholder="$t('login.username')" class="input"/>
          <input type="text" v-model="signUpEmail" :placeholder="$t('login.email')" class="input"/>
          <input type="password" v-model="signUpPassword" :placeholder="$t('login.password')" class="input"/>
          <button type="submit" class="btn">{{ $t('login.signUp') }}</button>
        </form>
      </div>

      <!-- Sign In -->
      <div class="container__form container--signin">
        <form action="#" class="form" id="form2" @submit.prevent="handleSignIn">
          <h2 class="form__title">{{ $t('login.signIn') }}</h2>
          <input type="text" v-model="signInUserName" :placeholder="$t('login.username')" class="input"/>
          <input type="password" v-model="signInPassword" :placeholder="$t('login.password')" class="input"/>
<!--          <a href="#" class="link" @click.prevent="forgotPassword">{{ $t('login.forgotPassword') }}</a>-->
          <button type="submit" class="btn">{{ $t('login.signIn') }}</button>
        </form>
      </div>

      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" @click="toggleToSignIn">{{ $t('login.signIn') }}</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" @click="toggleToSignUp">{{ $t('login.signUp') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
@import "/src/css/base.css";
@import "/src/css/login/index.css";

.el-message {
  top: 200px !important;
}
</style>
